<template>
    <j-modal :title="'员工设置'" :width="width" :visible="visible" switchFullscreen cancelText="关闭"
        @cancel="visible = false">
        <a-card :bordered="false">
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                    <a-row :gutter="24">
                        <a-col :span="4">
                            <a-form-model-item label="手机号">
                                <j-input v-model="queryParam.phoneTakingMeals" placeholder="请输入手机号" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-model-item label="姓名">
                                <j-input v-model="queryParam.nameTakingMeal" placeholder="请输入姓名" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="6">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                                <a-button type="primary" @click="searchReset" icon="reload"
                                    style="margin-left: 8px">重置</a-button>
                                <a-button type="primary" @click="showRechargeSetModal"
                                    style="margin-left: 8px">设置自动充值金额</a-button>
                                <a-popconfirm title="确定批量手动充值吗?" @confirm="manuallyReset()">
                                    <a-button type="primary" style="margin-left: 8px">批量手动充值</a-button>
                                </a-popconfirm>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <div>
                <a-table ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="id"
                    :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                    class="j-table-force-nowrap" @change="handleTableChange">
                    <template slot="autoSlot" slot-scope="text,record">
                        <a-switch :checked="text !== '0'" @change="changeState(record)" checked-children="是"
                            un-checked-children="否" size="large" />
                    </template>
                    <span slot="action" slot-scope="text, record">
                        <a @click="showManualRechargeModal(record)">手动储值</a>
                        <a-divider type="vertical" />
                        <a @click="showRechargeListModal(record)">查看储值记录</a>
                    </span>
                </a-table>
            </div>
            <manual-recharge-modal ref="manualRechargeModalRef" @loadData="loadData"></manual-recharge-modal>
            <recharge-list-modal ref="rechargeListModalRef"></recharge-list-modal>
            <recharge-set-modal ref="rechargeSetModalRef" @loadData="_getCompanyInfo"></recharge-set-modal>
        </a-card>
    </j-modal>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@api/manage'
import ManualRechargeModal from './manualRechargeModal.vue'
import RechargeListModal from './rechargeListModal.vue'
import RechargeSetModal from './rechargeSetModal.vue'

export default {
    name: 'HcRiderList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
        ManualRechargeModal,
        RechargeListModal,
        RechargeSetModal
    },
    data() {
        return {
            width: 1500,
            companyId: '',
            visible: false,
            description: '企业账户',
            // 表头
            columns: [],
            url: {
                list: "hc/hcUser/list",
                delete: "hc/hcCompanyInfo/delete",
            },
            dictOptions: {},
            superFieldList: [],
            baseUrl: '',
        }
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        setData(id) {
            this.queryParam.companyId = id;
            this._getCompanyInfo();
            this.visible = true;
        },
        async _getCompanyInfo() {
            let res = await getAction('/hc/hcCompanyInfo/queryById', { id: this.queryParam.companyId })
            console.log('res', res);
            let { mealSupplement } = res.result;
            this.columns = [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '公司名称',
                    align: "center",
                    dataIndex: 'companyName',
                },
                {
                    title: '姓名',
                    align: "center",
                    dataIndex: 'nameTakingMeal',
                },
                {
                    title: '手机号',
                    align: "center",
                    dataIndex: 'phoneTakingMeals',
                },
                {
                    title: '添加时间',
                    align: "center",
                    dataIndex: 'createTime'
                },
                {
                    title: '工作日自动储值金额(' + (mealSupplement ? mealSupplement : 0) + '元)',
                    align: "center",
                    dataIndex: 'automatic',
                    scopedSlots: { customRender: 'autoSlot' }
                },
                {
                    title: '账户金额',
                    align: "center",
                    dataIndex: 'walletBalance',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }]
            this.loadData();
        },
        loadData(arg) {
            if (!this.queryParam.companyId) {
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            var params = this.getQueryParams();//查询条件
            this.loading = true;
            postAction(this.url.list, params).then((res) => {
                if (res.success) {
                    //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                    this.dataSource = res.result.records || res.result;
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                    //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                } else {
                    this.$message.warning(res.message)
                }
            }).finally(() => {
                this.loading = false
            })
        },
        async changeState(record) {
            let res = await postAction('/hc/hcUser/setAutomatic', {
                id: record.id,
                automatic: record.automatic === '0' ? '1' : '0'
            });
            if (res.success) {
                record.automatic = record.automatic === '0' ? '1' : '0';
                this.$message.success('设置成功');
            } else {
                this.$message.warning(res.message);
            }
        },
        //展示手动储值弹窗
        showManualRechargeModal(data) {
            let {
                nameTakingMeal,
                phoneTakingMeals,
            } = data;
            this.$refs.manualRechargeModalRef.show({ nameTakingMeal, phoneTakingMeals, companyId: this.queryParam.companyId })
        },
        //展示充值记录弹窗
        showRechargeListModal(record) {
            this.$refs.rechargeListModalRef.show(record.id)
        },
        showRechargeSetModal() {
            this.$refs.rechargeSetModalRef.show(this.queryParam.companyId)
        },
        async manuallyReset() {
            let res = await postAction('/hc/hcCompanyInfo/refreshAllMealSupplement', { id: this.queryParam.companyId })
            console.log('res', res);
            if (res.success) {
                this.$message.success(res.message);
                this.loadData();
            } else {
                this.$message.warning(res.message);
            }
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>